<template>
  <div ref="fixLeftRef" class="fixed_left">
    <!---->
    <div class="dailyCheckIn fixed" v-click-move @click="handleClick(1)">
      <NuxtImg src="/images/home/fixActivety/left-1.gif" />
    </div>
    <div class="rechargeBubble" v-click-move @click="handleClick(2)">
      <div class="body">
        <NuxtImg src="/images/home/fixActivety/left-2.png" />
        <div class="time">41:15:55</div>
      </div>
      <!----><!---->
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  appCenterRef: {
    type: Object,
    default: () => {},
  },
});

const fixLeftRef = ref();

let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
function scrollEvent() {
  fixLeftRef.value.style.left = "-1.4rem";
  if (scrollTimeout) clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    fixLeftRef.value.style.left = "0.14rem";
  }, 600);
}

const userStore = useUserStore();
function handleClick(type: number) {
  if (!userStore.isLogin) {
    userStore.changeShowLogin(true);
    return;
  }
  if (type === 1) {
    navigateTo({ name: "activity-my-sterycard" });
  } else {
    navigateTo({ name: "activity-daily-checkin" });
  }
}

onMounted(async () => {
  await nextTick();
  props.appCenterRef?.addEventListener("scroll", scrollEvent);
});
onActivated(() => {
  props.appCenterRef?.addEventListener("scroll", scrollEvent);
});
onDeactivated(() => {
  props.appCenterRef?.removeEventListener("scroll", scrollEvent);
});
onUnmounted(() => {
  props.appCenterRef?.removeEventListener("scroll", scrollEvent);
});
</script>

<style scoped lang="scss">
.fixed_left {
  position: absolute;
  left: 0.14rem;
  bottom: 2.5rem;
  z-index: 81;
  width: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: all 0.3s ease;
}
.fixed_left .fixed {
  width: 1.8rem;
}
.fixed_left .dailyCheckIn img {
  width: 2rem;
}
.rechargeBubble {
  background-color: #0000;
  overflow: unset;
  width: 1.9rem;
  height: 1.9rem;
  position: relative;
  z-index: 81;
}
.rechargeBubble .body {
  position: absolute;
  width: 1.9rem;
  height: 1.9rem;
  right: 0;
}
.rechargeBubble .body img {
  position: absolute;
  width: 1.8rem;
}
.rechargeBubble .body .time {
  position: absolute;
  top: -0.25rem;
  left: 0;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1.8rem;
  text-align: center;
  color: var(--theme-dec4);
  font-size: 0.34rem;
  font-weight: 700;
}
</style>
